<template>
  <div>
    <div class="w">
      <div class="headers">
        <div class="return">
          <span @click="$router.go(-1)"
            class="iconfont icon-jiantouzuo"
          ></span>
        </div>
        <div class="title">全部作品</div>
      </div>

      <div class="score" v-if="scoreLists">
        <div class="score-h">
          <p>下厨房综合评分</p>
        </div>
        <div class="score-f">
          <div class="score-num">
            <p>{{ scoreLists.fraction }}</p>
            <p>人做过</p>
          </div>
          <div class="score-strip">
            <div class="strip">
              <div class="strip-father">
                <div
                  class="strip-son"
                  :style="{ width: scoreLists.rightOn }"
                ></div>
              </div>
              <span>好极了</span>
            </div>
            <div class="strip">
              <div class="strip-father">
                <div
                  class="strip-son" 
                  :style="{ width: scoreLists.veryGood }"
                ></div>
              </div>
              <span>挺好</span>
            </div>
            <div class="strip">
              <div class="strip-father">
                <div
                  class="strip-son"
                  :style="{ width: scoreLists.commonly }"
                ></div>
              </div>
              <span>一般</span>
            </div>
          </div>
        </div>
      </div>

      <div class="comments-father" v-if="allWorksLists">
        <div
          class="comments"
          v-for="(item, index) in allWorksLists[0].worksLists"
          :key="index"
        >
          <div class="username">
            <div class="portraitOrName">
              <div class="img">
                <img :src="item.touxiang" height="36" alt="" />
              </div>
              <p>{{ item.username }}</p>
            </div>
            <div class="followOrMore">
              <div class="follow">
                <button>关注</button>
              </div>
              <div class="more">
                <a href="#">
                  <img src="" width="24" alt="" />
                </a>
              </div>
            </div>
          </div>
          <div class="content">
            <p>分享图片</p>
            <div class="pic">
              <div class="pic-img" v-for="k in item.worksImg" :key="k">
                <img :src="k" alt="" :width="item.worksImg.length==1?220:108" />
              </div>
            </div>
            <div class="dish-name">{{ item.worksName }}</div>
          </div>
          <div class="comments-foot">
            <div class="fabOrcomm">
              <div class="fabulous">
                <div class="img">
                  <span class="iconfont icon-dianzan"></span>
                </div>
                <span>{{ item.fabulous }}</span>
              </div>
              <div class="comment">
                <div class="img">
                  <span class="iconfont icon-qipao"></span>
                </div>
                <span>{{ item.comment == 0 ? "评论" : item.comment }}</span>
              </div>
            </div>
            <div class="comment-text" v-if="item.othersComment.length!=0">
              <p v-for="(x, i) in item.othersComment" :key="i">
                <span>{{ x.othersName }}</span
                >:
                <span>{{ x.othersTexts }}</span>
              </p>
            </div>
            <div class="release-time">{{ item.times }}</div>
          </div>
        </div>
        <div class="baikuai"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { detailsData } from "../api/details.js";
import { allWorksData } from "../api/allWorks.js";
export default {
  data() {
    return {
      listId: null,
      scoreLists: null,
      allWorksLists: null,
    };
  },
  created() {
    this.listId = this.$route.query.id;

    detailsData().then((data) => {
      let lists = data.details.filter((item) => {
        return item.id == this.listId;
      });
      this.scoreLists = lists[0].score;
      console.log(this.scoreLists);
    });

    allWorksData().then((data) => {
      this.allWorksLists = data.allWoks.filter((item) => {
        return item.id == this.listId;
      });
      console.log(this.allWorksLists[0]);
    });
  },
};
</script>

<style>
@import "../assets/css/public.css";
@import "../assets/css/userComment.css";
</style>